<template>
  <div>
    <p class="box-head">交易统计分析</p>
    <el-row id="rowCell"  class="rowCon" type="flex" align="center" justify="space-around" style="flex-wrap:wrap;"   :gutter="40">
      <el-card class="box-card">
        <div slot="header" class="box-card-title">
          <span>成交类型统计</span>
        </div>
        <el-row type="flex" justify="space-around" :gutter="10">
          <div>
            <p>成交总数</p>
            <p>1000</p>
          </div>
          <div style="">
            <p>三方</p>
            <p>400</p>
          </div>
          <div style="">
            <p>代办</p>
            <p>500</p>
          </div>
          <div style="">
            <p>租凭</p>
            <p>100</p>
          </div>
        </el-row>
        <!-- 成交类型统计 -->
        <chart :chartStyle="'min-width:20rem;min-height:25rem;height:25rem'"  ref="clinchDeal" :option="clinchDealOption" />
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="box-card-title">
          <span>成交收入统计</span>
        </div>
        <!-- 成交收入统计 -->
        <chart :chartStyle="'min-width:20rem;min-height:30rem;height:30rem'"  ref="transactionRevenue" :option="transactionRevenueOption" />
      </el-card>
      <el-card class="box-card">
        <div slot="header" class="box-card-title">
          <span>成交户型统计</span>
        </div>
        <!-- 成交户型统计 -->
        <chart :chartStyle="'min-width:20rem;min-height:30rem;height:30rem'"  ref="transactionVolume" :option="transactionVolumeOption" />      
      </el-card>
       <el-card class="box-card-half">
        <div slot="header" class="box-card-title">
          <span>区域成交量统计</span>
        </div>
        <!-- 区域成交量统计 -->
        <chart :chartStyle="'min-width:20rem;min-height:30rem;height:30rem'"  ref="regionalVolume" :option="regionalVolumeOption" />
      </el-card>
      <el-col class="box-card-half">
        <el-card>
            <div slot="header" class="box-card-title">
            <span>区域成交收入排名</span>
            </div>
            <chart :chartStyle="'min-width:20rem;min-height:10rem;height:11rem'"  ref="incomeRanked" :option="incomeRankedOption" />
        </el-card>
        <el-card>
            <div slot="header" class="box-card-title">
            <span>区域成交户型统计</span>
            </div>
            <!-- 区域成交户型统计 -->
            <chart :chartStyle="'min-width:20rem;min-height:10rem;height:11rem'"  ref="dealFamily" :option="dealFamilyOption" />
        </el-card>
      </el-col>
      <el-card class="box-card">
            <div slot="header" class="box-card-title">
            <span>门店成交TOP10</span>
            </div>
            <!-- 门店收入TOP10 -->
            <chart :chartStyle="'min-width:20rem;min-height:30rem;height:30rem'"  ref="storesDeal" :option="storesDealOption" />
        </el-card>
        <el-card class="box-card">
            <div slot="header" class="box-card-title">
            <span>门店收入TOP10</span>
            </div>
            <!-- 门店收入TOP10 -->
            <chart :chartStyle="'min-width:20rem;min-height:30rem;height:30rem'"  ref="storesIncome" :option="storesIncomeOption" />
        </el-card>
        <el-card class="box-card">
            <div slot="header" class="box-card-title">
            <span>个人成交TOP10</span>
            </div>
            <!-- 个人成交TOP10 -->
            <chart :chartStyle="'min-width:20rem;min-height:30rem;height:30rem'"  ref="personalClinch" :option="personalClinchOption" />
        </el-card>
    </el-row>
  </div>
</template>
<script>
import chart from "../../../../components/Charts/chart";
import Sortable from 'sortablejs'
export default {
    components: {
    chart
    },
    data() {
          return {
            clinchDealOption:{},//房源量图表
            transactionRevenueOption:{},//成交户型统计
            transactionVolumeOption:{},//房源类型占比
            regionalVolumeOption:{},//区域成交量
            incomeRankedOption:{},//房源分析
            dealFamilyOption:{},//区域成交户型\
            storesDealOption:{},//门店成交top10
            storesIncomeOption:{},//门店收入top10
            personalClinchOption:{},//个人收入
            sortable: null,
          }
      },
    mounted(){
      this.fetchData()
    },
    created(){
        this.$nextTick(() => {
          this.setSort()
        })
    },
    methods:{
        setSort(){
            var el = document.getElementById('rowCell');
            this.sortable = Sortable.create(el, {
                onEnd: evt => {
                    // const tempIndex = this.newList.splice(evt.oldIndex, 1)[0]
                    // this.newList.splice(evt.newIndex, 0, tempIndex)
                }
            })
        },
      initPersonalClinchChart(){
        var xData = [
           "小明",
           "小红",
           "小美",
           "笑笑",
           "拉拉",
           "喝喝",
           "浩浩",
        ];
        var data1 = {
              data: [50,90,100,110,120,130,150],
              type: "bar",
              barWidth:20
            };
            var initData = {
              //需要给我传的数据
              exchange:true,
              xData: xData,
              yData: [data1],
              color: ["#5282E6", "#ABDB9D", "#3EB37F", "#FECA64", "#FF854A", "#FF6567","#E870B8"],
              legend: [],
              yAxisName: "套",
              refName: "personalClinch",
              returnOption: "personalClinchOption",
              textColor: "black",
              xAxisLine: {
                axisLabel: {
                  textStyle: {
                    color: "black"
                  }
                },
                axisLine: {
                  lineStyle: {
                    color: "#656a83"
                  }
                },
                splitLine: {
                  show: false,
                  lineStyle: {
                    color: "#262544"
                  }
                }
              },
              yAxisLine: {
                axisLabel: {
                  textStyle: {
                    color: "black"
                  }
                },
                axisLine: {
                  lineStyle: {
                    color: "#656a83"
                  }
                },
                splitLine: {
                  show: true,
                  lineStyle: {
                    color: "#656a83"
                  }
                }
              }
            };
          this.forEachFun(initData)
      },
        //门店收入top10
      initStoresIncomeChart(){
           var xData = [
           "涧西东区",
           "涧西西区",
           "涧西南区",
           "老城瀍河区",
           "洛龙东区",
           "洛龙西区",
           "西工区",
        ];
        var data1 = {
              data: [50,90,100,110,120,130,150],
              type: "bar",
              barWidth:20
            };
            var initData = {
              //需要给我传的数据
              exchange:true,
              xData: xData,
              yData: [data1],
              color: ["#5282E6", "#ABDB9D", "#3EB37F", "#FECA64", "#FF854A", "#FF6567","#E870B8"],
              legend: ['三方','代办','租凭',],
              yAxisName: "套",
              refName: "storesIncome",
              returnOption: "storesIncomeOption",
              textColor: "black",
              xAxisLine: {
                axisLabel: {
                  textStyle: {
                    color: "black"
                  }
                },
                axisLine: {
                  lineStyle: {
                    color: "#656a83"
                  }
                },
                splitLine: {
                  show: false,
                  lineStyle: {
                    color: "#262544"
                  }
                }
              },
              yAxisLine: {
                axisLabel: {
                  textStyle: {
                    color: "black"
                  }
                },
                axisLine: {
                  lineStyle: {
                    color: "#656a83"
                  }
                },
                splitLine: {
                  show: true,
                  lineStyle: {
                    color: "#656a83"
                  }
                }
              }
            };
          this.forEachFun(initData)
      },
        //门店成交top10
      initStoresDealOptionChart(){
           var xData = [
           "涧西东区",
           "涧西西区",
           "涧西南区",
           "老城瀍河区",
           "洛龙东区",
           "洛龙西区",
           "西工区",
        ];
        var data1 = {
              data: [50,90,100,110,120,130,150],
              type: "bar",
              barWidth:20
            };
            var initData = {
              //需要给我传的数据
              exchange:true,
              xData: xData,
              yData: [data1],
              color: ["#5282E6", "#ABDB9D", "#3EB37F", "#FECA64", "#FF854A", "#FF6567","#E870B8"],
              legend: [],
              yAxisName: "套",
              refName: "storesDeal",
              returnOption: "storesDealOption",
              textColor: "black",
              xAxisLine: {
                axisLabel: {
                  textStyle: {
                    color: "black"
                  }
                },
                axisLine: {
                  lineStyle: {
                    color: "#656a83"
                  }
                },
                splitLine: {
                  show: false,
                  lineStyle: {
                    color: "#262544"
                  }
                }
              },
              yAxisLine: {
                axisLabel: {
                  textStyle: {
                    color: "black"
                  }
                },
                axisLine: {
                  lineStyle: {
                    color: "#656a83"
                  }
                },
                splitLine: {
                  show: true,
                  lineStyle: {
                    color: "#656a83"
                  }
                }
              }
            };
          this.forEachFun(initData)
      },
      //区域成交户型
      initdealFamilyeChart(){
        var xData = [
            "一居",
            "二居",
            "三居",
            "四居",
            "五居",
            "其他"
        ];
        var data1 = {
              data: [2000, 1900, 1700, 1650, 1450,750],
              type: "bar"
            };
            var initData = {
              //需要给我传的数据
              // exchange:true,//xy轴数据互换
              xData: xData,
              yData: [data1],
              color: ["#5282E6", "#ABDB9D", "#3EB37F", "#FECA64", "#FF854A", "#FF6567","#E870B8"],
              legend: [],
              yAxisName: "套",
              refName: "dealFamily",
              returnOption: "dealFamilyOption",
              textColor: "black",
              grid:[{
                    left: '12%',
                    right: '3%',
                    top: '15%'
                }],
              xAxisLine: {
                axisLabel: {
                  textStyle: {
                    color: "black"
                  }
                },
                axisLine: {
                  lineStyle: {
                    color: "#656a83"
                  }
                },
                splitLine: {
                  show: false,
                  lineStyle: {
                    color: "#262544"
                  }
                }
              },
              yAxisLine: {
                axisLabel: {
                  textStyle: {
                    color: "black"
                  }
                },
                axisLine: {
                  lineStyle: {
                    color: "#656a83"
                  }
                },
                splitLine: {
                  show: true,
                  lineStyle: {
                    color: "#656a83"
                  }
                }
              }
            };
            this.forEachFun(initData);
      },
      //收入排名
      initincomeRankedOptionChart(){
        var xData = [
            "涧西东区",
           "涧西西区",
           "涧西南区",
           "老城瀍河区",
           "洛龙东区",
           "洛龙西区",
           "西工区",
        ];
        var data1 = {
              data: [2000, 1900, 1700, 1650, 1450,750,500],
              type: "bar"
            };
            var initData = {
              //需要给我传的数据
              // exchange:true,//xy轴数据互换
              xData: xData,
              yData: [data1],
              color: ["#5282E6", "#ABDB9D", "#3EB37F", "#FECA64", "#FF854A", "#FF6567","#E870B8"],
              legend: [],
              yAxisName: "金额",
              refName: "incomeRanked",
              returnOption: "incomeRankedOption",
              textColor: "black",
              grid:[{
                    left: '12%',
                    right: '3%',
                    top: '15%'
                }],
              xAxisLine: {
                axisLabel: {
                  textStyle: {
                    color: "black"
                  }
                },
                axisLine: {
                  lineStyle: {
                    color: "#656a83"
                  }
                },
                splitLine: {
                  show: false,
                  lineStyle: {
                    color: "#262544"
                  }
                }
              },
              yAxisLine: {
                axisLabel: {
                  textStyle: {
                    color: "black"
                  }
                },
                axisLine: {
                  lineStyle: {
                    color: "#656a83"
                  }
                },
                splitLine: {
                  show: true,
                  lineStyle: {
                    color: "#656a83"
                  }
                }
              }
            };
            this.forEachFun(initData);
      },
      //区域成交量
      initregionalVolumeChart(){
        var xData = [
           "涧西东区",
           "涧西西区",
           "涧西南区",
           "老城瀍河区",
           "洛龙东区",
           "洛龙西区",
           "西工区",
        ];
        var data1 = {
          data: [2000, 1000, 1500, 800, 500, 900, 500],
          type: "bar",
          barWidth:15,
        };
        var data2 = {
          data: [500, 900, 1000, 999, 1600, 1800, 600],
          type: "bar",
          barWidth:15,
        };
        var data3 = {
          data: [100, 50, 120, 130, 110, 56, 300],
          type: "bar",
          barWidth:15,
        };
        var initData = {
              //需要给我传的数据
              xData: xData,
              yData: [data1, data2,data3],
              legend: ["代办", "三方","租凭"],
              refName: "regionalVolume",
              returnOption: "regionalVolumeOption",
              textColor: "black",
              yAxisName: "(套)",
              grid: {
                right: "10%"
              },
              xAxisLine: {
                axisLabel: {
                  textStyle: {
                    color: "black"
                  }
                },
                axisLine: {
                  lineStyle: {
                    color: "#262544"
                  }
                },
                splitLine: {
                  show: false,
                  lineStyle: {
                    color: "#262544"
                  }
                }
              },
              yAxisLine: {
                axisLabel: {
                  textStyle: {
                    color: "black"
                  }
                },
                axisLine: {
                  lineStyle: {
                    color: "#262544"
                  }
                },
                splitLine: {
                  show: true,
                  lineStyle: {
                    color: "#262544"
                  }
                }
              }
            };
            this.forEachFun(initData);
      },
      inittransactionVolumeChat(){
        var xData = [
           "一居",
           "二居",
           "三居",
           "四居",
           "五居",
           "其他",
        ];
        var data1 = {
              data: [60, 50, 49, 120, 60, 33],
              type: "line"
            };
        var data2 = {
            data: [20, 30,40, 11, 22, 22],
            type: "line"
        };
        var data3 = {
            data: [66, 55, 33, 22, 60,44],
            type: "line"
        };
            var initData = {
              //需要给我传的数据
              xData: xData,
            //   sum:true,
              yData: [data1,data2,data3],
              color: ["#5282E6", "#ABDB9D", "#3EB37F", "#FECA64", "#FF854A", "#FF6567","#E870B8"],
              legend: ['三方','代办','租凭',],
              yAxisName: "套",
              refName: "transactionVolume",
              returnOption: "transactionVolumeOption",
              textColor: "black",
              xAxisLine: {
                axisLabel: {
                  textStyle: {
                    color: "black"
                  }
                },
                axisLine: {
                  lineStyle: {
                    color: "#656a83"
                  }
                },
                splitLine: {
                  show: false,
                  lineStyle: {
                    color: "#262544"
                  }
                }
              },
              yAxisLine: {
                axisLabel: {
                  textStyle: {
                    color: "black"
                  }
                },
                axisLine: {
                  lineStyle: {
                    color: "#656a83"
                  }
                },
                splitLine: {
                  show: true,
                  lineStyle: {
                    color: "#656a83"
                  }
                }
              }
            };
          this.forEachFun(initData)
      },
      //成交收入统计
      inittransactionRevenueChart(){
            var data = [
            { value: 8, name: "租凭服务费" ,type:'pie'},
            { value: 8, name: "居间服务费" ,type:'pie'},
            { value: 18, name: "风险保证金" ,type:'pie'},
            { value: 20, name: "评估费" ,type:'pie'},
          ]
          var initData = {
            //需要给我传的数据
            yData: [data],
            pieName:'房源销量分布',
            legendObj:{
            data:['租凭服务费','居间服务费','风险保证金','评估费'],
              bottom: 10,
            },
            refName: "transactionRevenue",
            returnOption: "transactionRevenueOption",
            textColor: "black",
            radius:['40%','60%'],
            center:['50%','50%'],
            label: {
                normal: {
                    position: 'outside',
                    formatter: '{b}\n{d}% \n{c}\r(套) ',
                    fontSize:15
                }
            },
            seriesCenter:[{
                    name: '白',
                    type: 'pie',
                    clockWise: true,
                    hoverAnimation: false,
                    radius: [100, 100],
                    label: {
                        normal: {
                            position: 'center'
                        }
                    },
                    data: [{
                        value: 1,
                        label: {
                            normal: {
                                formatter: '\n210',
                                textStyle: {
                                    color: '#666666',
                                    fontSize: 26
                                }
                            }
                        }
                    }, {
                        tooltip: {
                            show: false
                        },
                        label: {
                            normal: {
                                formatter: '成交收入总额\n\n (万元)',
                                textStyle: {
                                    color: '#666666',
                                    fontSize: 15
                                }
                            }
                        }
                    }]
                        }]
          };
          this.forEachFun(initData)
      },
      forEachFun(initData) {
          //处理数据生成Option
          var option = this.$utils.returnItemSeries(initData);
          this.$set(this, initData.returnOption, option);
          var self = this;
          setTimeout(function() {
            if (self.$refs[initData.refName][0]) {
              self.$refs[initData.refName][0].initChart();
            } else {
              self.$refs[initData.refName].initChart();
            }
          }, 0);
      },
       //成交类型统计
       initclinchDealChart(){
          var data = [
            { value: 335, name: "三方" ,type:'pie'},
            { value: 310, name: "代办" ,type:'pie'},
            { value: 234, name: "租凭" ,type:'pie'},
          ]
          var initData = {
            //需要给我传的数据
            yData: [data],
            legend: [],
            refName: "clinchDeal",
            returnOption: "clinchDealOption",
            textColor: "white",
            radius:'80%',
            center:['50%','50%'],
             label: {
                normal: {
                    position: 'inner',
                    formatter: '{b}\n{d}% \n{c}\r(套) ',
                    fontSize:15
                }
            },
          };
          this.forEachFun(initData)
       },
        //获取数据
        fetchData(){
          this.initclinchDealChart()
          this.inittransactionRevenueChart()
          this.inittransactionVolumeChat()
          this.initregionalVolumeChart()
          this.initincomeRankedOptionChart()
          this.initdealFamilyeChart()
          this.initStoresDealOptionChart()
          this.initStoresIncomeChart()
          this.initPersonalClinchChart()
        },
        //跳页面
        pushPage(name){
            this.$router.push({ 
                path: name 
            })
        },
    }
}
</script>
<style scoped>
@import '../main.css'; 


</style>
